<template>
  <PageWrapLayout>
    <a-tabs v-model:activeKey="activeKey" @change="tabChange" destroyInactiveTabPane>
      <a-tab-pane v-for="item in tabs" :key="item.s_group" :tab="item.s_group_name">
        <order type="order" v-if="item.s_group === 'order'" />
        <system type="system" v-if="item.s_group === 'system'" />

        <oss type="oss" v-if="item.s_group === 'oss'" />
        <wxpay type="wxpay" v-if="item.s_group === 'wxpay'" />
        <cash type="cash" v-if="item.s_group === 'cash'" />
        <energy type="energy" v-if="item.s_group === 'energy'" />
      </a-tab-pane>
    </a-tabs>
  </PageWrapLayout>
</template>
<script setup>
import { ref, shallowRef } from "vue";
import order from "./tabs/order.vue";
import system from "./tabs/system.vue";
import oss from "./tabs/oss.vue";
import wxpay from './tabs/wxpay.vue'
import cash from './tabs/cash.vue'
import energy from './tabs/energy.vue'

import { getGroup } from '@/api/system'

let currentComp = shallowRef();
const activeKey = ref("order");

const tabs = ref([])

// tab切换
const tabChange = (val) => {
  currentComp._value = val;
};

const getGroupList = () => {
  getGroup().then(res => {
    const data = res.data
    tabs.value = data
    activeKey.value = data[0].s_group
  })
}
getGroupList()
</script>
